<template>
  <div class="box_yj sectionss" ref="parent">
    <span></span>

    <div class="section-header">三医人才需求占比</div>
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_TalentIn_sanyiTalentDemand_all } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      data: null,
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    },
    chartData() {
      let tempData = [];
      Object.keys(this.data).forEach(v=>{
        tempData.push({
          name: v === 'PlanNumber' ? '计划人数' : '实际完成人数',
          value: this.data[v]
        });
      });
      return tempData;
    },
    titleData() {
      return {
        total: this.data.PlanNumber,
        CompleteNumber: this.data.CompleteNumber,
        percent: Math.round((this.data.CompleteNumber/this.data.PlanNumber)*100)+'%'
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
      get_TalentIn_sanyiTalentDemand_all(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        // this.data = data[0];
        this.data = {
        	CompleteNumber: data[0]['value'],
        	PlanNumber: Number(data[0]['value']) + Number(data[1]['value']),
        }
        // this.data = data.length ? data[0] : {PlanNumber:111,CompleteNumber:222}
        this.$nextTick(_=>{
          this.drawChart();
        })
      })
    },
    drawChart() {
      if(!this.data) return false
      let option = {
          color: ['#6bf7ef','#d44789'],
          title: {
              text: `\n总需人才数: ${this.titleData.total}\n\n需三医人才数: ${this.titleData.CompleteNumber}`,
              subtext: `需求占比: ${this.titleData.percent}`,
              left: 'center',
              textAlign: 'left',
              textStyle: {
                fontSize: 12,
                color: 'rgba(255,255,255,.5)'
              },
              subtextStyle: {
                fontSize: 12,
                color: 'rgba(255,255,255,.5)'
              },
              left: this.setStyle - 140,
              top: '13%',
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
              {
                  name: '三医人才引进占比',
                  type: 'pie',
                  radius: '55%',
                  center: ['35%', '50%'],
                  data: this.chartData,
                  startAngle: 90,
                  labelLine: {
                    length: 5
                  },
                  label: {
                    rotate: 0,
                    formatter: '{d}%'
                  },
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
</style>